import { ref, computed, watch } from 'vue'

import type { BwNodeSlotInfo } from '../model'
export function useDomSlot(props, emit) {
  const isContainer = ref<boolean>()

  /** 展开节点信息 */
  const onExpand = (nodeInfo: BwNodeSlotInfo) => {
    nodeInfo.isExpand = !nodeInfo.isExpand
  }

  /** 临时隐藏节点 */
  const onHide = (nodeId: string, isHide: boolean) => {
    emit('hide', nodeId, isHide)
  }

  /** 选中节点 */
  const onSelect = (nodeId: string) => {
    emit('select', nodeId)
  }

  /** 删除节点 */
  const onDelete = (nodeId: string) => {
    emit('delete', nodeId)
  }

  watch(
    () => props.data,
    (newVal?: Array<BwNodeSlotInfo>) => {
      if (Array.isArray(newVal) && newVal.length) {
        const slotName = newVal[0].slotKey

        isContainer.value = true
      } else {
        isContainer.value = false
      }
    },
    { deep: true, immediate: true }
  )

  return {
    isContainer,

    onHide,
    onExpand,
    onSelect,
    onDelete,
  }
}
